<template>
	<view class="index">
		<view class="bg_image">
			<image src="@/static/temp/apply.png" mode="widthFix"></image>
		</view>
		<view class="certification">
			<form @submit="formSubmit" @reset="formReset">
				<view class="certification_head">
					<view class="certification_head_body">
						<view class="title">
							商圈入驻
						</view>
						<view class="certification_head_body_item b-b-ea">
							<view class="lable">店铺名称</view>

							<input type="text" name="store_name" v-model="form.store_name"
								placeholder='请输入店铺名称' />
						</view>
						<view class="certification_head_body_item b-b-ea">
							<view class="lable">真实姓名</view>
							<input type="text" name="user_name" v-model="form.user_name"
								placeholder='请输入真实姓名' />
						</view>
						<view class="certification_head_body_item b-b-ea">
							<view class="lable">手机号</view>
							<input type="text" name="mobile" v-model="form.mobile"
								placeholder='请输入手机号码' />
						</view>
						<view class="certification_head_body_item b-b-ea">
							<view class="lable">登录密码</view>
							<input type="text" name="password" v-model="form.password" password="true"
								placeholder='请输入登录密码' />
						</view>
						<view class="certification_head_body_item d-b-c b-b-ea">
							<view class="lable">店铺类型</view>
							<view class=" input-box flex-1">
								<label style="padding-left: 30rpx;" @click="form.type=0">
									<radio value="r1" :checked="form.type==0"
										style="transform: scale(0.5);" />线上商城
								</label>
								<label style="padding-left: 30rpx;" @click="form.type=1">
									<radio value="r2" :checked="form.type==1"
										style="transform: scale(0.5);" />线下门店
								</label>
							</view>
						</view>
						<view class="certification_head_body_item d-b-c b-b-ea">
							<view class="lable">营业时间</view>
							<view class=" input-box flex-1" style="display: flex;">
								<picker mode="time" :value="form.startTime" @change="bindTimeChange"
									style="width: 50%;">
									<view class="aasdas">{{form.startTime?form.startTime:'请选择'}}
									</view>
								</picker>
								-
								<picker mode="time" :value="form.endTime" @change="bindTimeChange1"
									style="width: 50%;">
									<view class="aasdas">{{form.endTime?form.endTime:'请选择'}}</view>
								</picker>
							</view>
						</view>
						<picker class="" value="" @change="changeSelect($event)"
							:range="classify_data_name">
							<view class="certification_head_body_item d-b-c b-b-ea">
								<view class="lable">店铺分类</view>
								<view class=" input-box flex-1" v-if="classify_data_name_active">
									{{classify_data_name_active}}
								</view>
								<view class=" input-box flex-1" style="color: #777777;" v-else>请选择店铺分类
								</view>
								<view class="icon iconfont icon-jiantou" style="font-size: 24rpx;">
								</view>
							</view>
						</picker>
						<view class="certification_head_body_item d-b-c " @tap="checkAdress">
							<view class="lable">店铺位置</view>
							<view class=" input-box flex-1" v-if="form.address">
								{{form.address}}
							</view>
							<view class=" input-box flex-1" style="color: #777777;" v-else>请选择店铺位置</view>
							<view class="icon iconfont icon-jiantou" style="font-size: 24rpx;"></view>
						</view>

						<view class="certification_head_body_item" style="align-items: start;">
							<view class="lable">营业执照</view>
							<view class="login_index_updata_updata_item2 mt20"
								@click="openUpload('license')">
								<view class="login_index_updata_updata_item_body">
									<view v-if="business_id_path!=''" class="img">
										<image :src="business_id_path" mode="aspectFill"></image>
									</view>
									<view v-else class="img">
										<image src="@/static/temp/zhengjian.png" mode="aspectFill">
										</image>
									</view>
								</view>
							</view>
						</view>



						<view class="certification_head_body_item" style="align-items: start;">
							<view class="lable">店铺logo</view>
							<view class="login_index_updata_updata_item2 mt20"
								@click="openUpload('logo')">
								<view class="login_index_updata_updata_item_body1">
									<view v-if="logo_path!=''" class="img">
										<image :src="logo_path" mode="aspectFill"></image>
									</view>
									<view v-else class="img">
										<image src="@/static/noimg.png" mode="aspectFill">
										</image>
									</view>
								</view>
							</view>
						</view>

						<view @click="isRead=!isRead" class="d-s-c gray6 p-0-75 mt20">
							<view :class="isRead?'active agreement':'agreement'"></view>
							我已阅读并接受
							<text class="dominant" @click.stop="xieyi">《入驻商协议》</text>
						</view>
						
					</view>
				</view>
				<view class="login_index_btn">
					<button form-type="submit" type="default">立即申请</button>
				</view>
				<Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">上传图片</Upload>
			</form>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload';
	export default {
		components: {
			/*编辑组件*/
			Upload
		},

		data() {
			return {
				isRead:false,
				form: {
					image_frontid: 0,
					business_id: 0,
					mobile: '',
					password: '',
					type: 0,
					prov: '',
					city: '',
					region: '',
					address: '',
					lng: '',
					lat: '',
					logo_id: '',
					startTime:'',
					endTime:'',
					work_time: '',
				},
				isupload: false,
				type: 'frontid',
				logo_path: '',
				image_frontid_path: '',
				business_id_path: '',
				bg_image: '',
				classify_data_name: '', //列表名字
				classify_data_id: '', //列表id
				classify_data_name_active: '', //当前选中的列表名字
				classify_data_id_active: '', //当前选中的列表id
				/*当前秒数*/
				second: 60,
				send_btn_txt: '获取验证码',
				/*是否已发验证码*/
				is_send: false,
				sms_open: 0
			}
		},
		created() {
			// this.getData();
			this.get_classify();
		},
		methods: {
			xieyi(){
				uni.navigateTo({
					url:'/pages/shop/page'
				})
			},
			bindTimeChange(e){
				this.form.startTime = e.detail.value
			},
			bindTimeChange1(e){
				this.form.endTime = e.detail.value
			},
			// 选择店铺位置
			checkAdress() {
				let self = this
				uni.chooseLocation({
					success(res) {
						self.form.address = res.address
						self.form.lng = res.longitude
						self.form.lat = res.latitude
						self.getPCR()
					},
				})
			},
			getPCR() {
				let self = this;
				self._post('index/get_city', {
					lng: self.form.lng,
					lat: self.form.lat,
				}, function(res) {
					self.form.prov = res.data.result.addressComponent.province;
					self.form.city = res.data.result.addressComponent.city;
					self.form.region = res.data.result.addressComponent.district;
				});
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
			// /*获取数据*/
			// getData() {
			// 	let self = this;
			// 	self._get('user.index/detail', {}, function(res) {
			// 		self.bg_image = res.data.setting.supplier_image;
			// 	});
			// },
			//获取验证码
			getCode(mobile) {
				let self = this;
				self._post('supplier.apply/sendCode', {
					mobile: mobile
				}, function(res) {
					self.is_send = true;
					self.changeMsg();
				});
			},
			//获取分类
			get_classify() {
				let self = this;
				self._post('supplier.apply/category', {

				}, function(res) {
					let list_name = [];
					let list_id = [];
					//合成select列表
					list_name = res.data.list.map(item => item.category.map(obj => obj.name)).flat()
					list_id = res.data.list.map(item => item.category.map(obj => obj.category_id))
						.flat()
					// for (var i = 0; i < res.data.list.length; i++) {
					// 	list_name.push(res.data.list[i].name);
					// }
					// //合成上传所需id数组
					// for (var i2 = 0; i2 < res.data.list.length; i2++) {
					// 	list_id.push(res.data.list[i2].category_id);
					// }
					self.classify_data_name = list_name;
					self.classify_data_id = list_id;
					// self.sms_open = res.data.sms_open;
				});
			},
			//选择分类
			select() {
				let self = this;
				uni.showActionSheet({
					itemList: self.classify_data_name,
					success: function(res) {
						self.classify_data_name_active = self.classify_data_name[res.tapIndex];
						self.classify_data_id_active = self.classify_data_id[res.tapIndex];
					},
					fail: function(res) {

					}
				});
			},
			/*提交*/
			formSubmit: function(e) {
				let self = this;
				var formdata = e.detail.value;
				formdata.business_id = self.form.business_id;
				formdata.category_id = self.classify_data_id_active;
				formdata.type = self.form.type;
				formdata.prov = self.form.prov;
				formdata.city = self.form.city;
				formdata.region = self.form.region;
				formdata.address = self.form.address;
				formdata.lng = self.form.lng;
				formdata.lat = self.form.lat;
				formdata.logo_id = self.form.logo_id;
				formdata.work_time = self.form.startTime+'-'+self.form.endTime;

				if (self.form.address == '') {
					uni.showToast({
						title: '请选择店铺地址',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (self.classify_data_name_active == '') {
					uni.showToast({
						title: '请选择店铺分类',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.store_name == '') {
					uni.showToast({
						title: '请输入店铺名称',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.business_id == 0) {
					uni.showToast({
						title: '请上传营业执照',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.user_name == '') {
					uni.showToast({
						title: '请输入真实姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.mobile == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.password == '') {
					uni.showToast({
						title: '请填写登录密码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
				if (!reg.test(formdata.mobile)) {
					uni.showToast({
						title: '手机号码格式不正确',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				
				
				if(!self.isRead){
					uni.showToast({
						title: '请仔细阅读《入驻商协议》',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '正在提交',
					mask: true
				})
				console.log(formdata);
				self._post('supplier.apply/index', formdata, function(res) {
					self.showSuccess(res.msg, function() {
						self.gotoPage('/pages/shop/application_status')
					}, null, function() {
						uni.hideLoading();
					});
				});
			},
			/*上传*/
			openUpload(e) {
				this.type = e;
				this.isupload = true;
			},

			/*获取图片*/
			getImgsFunc(e) {
				console.log(e)
				if (e != null && e.length > 0) {
					if (this.type == 'frontid') {
						console.log(e[0].file_id);
						this.image_frontid_path = e[0].file_path;
						this.form.image_frontid = e[0].file_id;
					} else if (this.type == 'license') {
						console.log(e[0].file_id);
						this.business_id_path = e[0].file_path;
						this.form.business_id = e[0].file_id;
					} else if (this.type == 'logo') {
						console.log(e[0].file_id);
						this.logo_path = e[0].file_path;
						this.form.logo_id = e[0].file_id;
					}
				}
				this.isupload = false;
			},
			/* 下拉框 */
			changeSelect(e) {
				this.classify_data_id_active = this.classify_data_id[e.detail.value];
				this.classify_data_name_active = this.classify_data_name[e.detail.value];
			},
		}
	}
</script>

<style scoped>
	.dominant{
		color: #18b764;
	}
	.agreement {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid;
		background: #fff;
		position: relative;
		margin-right: 10rpx;
		box-sizing: border-box;
	}
	
	.agreement.active::after {
		content: '';
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		position: absolute;
		background-color: #18b764;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.aasdas{
		width: 100%;
		text-align: center;
	}
	.input-box {
		font-size: 28rpx;
	}


	.bg_image image {
		width: 100%;
	}

	.iconfont {
		font-size: 48rpx;
	}

	.index {
		width: 750rpx;
		background: #1BB765;
	}

	.certification {
		width: 675rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		box-sizing: border-box;
		background-color: white;
		position: absolute;
		top: 260rpx;
		left: 37.5rpx;
		margin-bottom: 50rpx;
		padding: 20rpx;
	}

	.certification_head {
		width: 100%;
	}

	.certification_head_body {
		width: 100%;
	}

	.certification_head_body .title {
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 100rpx;
	}

	.certification_head_body_item {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 32rpx !important;
	}

	.b-b-ea {
		border-bottom: 1rpx solid #eaeaea;
	}

	.certification_head_body_item .lable {
		width: 140rpx;
		font-size: 28rpx;
		color: #333333;
		height: 100rpx;
		line-height: 100rpx;
	}

	.certification_head_body_item view {
		margin-right: 10rpx;
	}

	.certification_head_body_item input {
		font-size: 28rpx;
	}

	.certification_head_body_item button {
		width: 172rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: 1rpx #E2231A solid;
		border-radius: 40rpx;
		font-size: 26rpx;
		color: #E2231A;
		padding: 0 20rpx;
		margin-top: 100px;
	}

	.certification_body {}

	.login_index_updata_name {
		margin-top: 28rpx;
		margin-left: 48rpx;
	}

	.login_index_updata_updata {
		width: 90%;
		height: 360rpx;
		margin: 0 auto;
		margin-top: 35rpx;
	}

	.login_index_updata_updata_item2 {
		width: 136px;
		height: 91px;
		border-radius: 15rpx;
		text-align: center;

	}

	.login_index_updata_updata_item_body {
		width: 136px;
		height: 91px;
	}

	.login_index_updata_updata_item_body .img image {
		width: 136px;
		height: 91px;
	}

	.login_index_updata_updata_item_body1 {
		width: 91px;
		height: 91px;
	}

	.login_index_updata_updata_item_body1 .img image {
		width: 91px;
		height: 91px;
	}

	.login_index_btn {
		position: relative;
		top: 30rpx;
		margin-bottom: 30rpx;
		margin-top: 56px;
	}

	.login_index_btn button {
		width: 90%;
		height: 80rpx;
		background-color: #18B764;
		border-radius: 50rpx;
		line-height: 80rpx;
		margin: 0 auto;
		color: white;
		font-size: 30rpx;
	}

	.certification_rule {
		position: relative;
		left: 500rpx;
		top: -10rpx;
	}

	.certification_rule text {
		color: #8a8a8a;
	}

	.certification_rule image {
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
	}

	.classify_text {
		color: #808080;
		margin-left: 40rpx;
	}

	.select input {
		padding-left: 60rpx;
		color: #808080;
	}
</style>